<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
	}
	#reg{
		margin-left:600px;
		margin-top:200px;
	}
	#promting{
		color:red;
		border:1px solid yellow;
	}
	#reg p{
		line-height:50px;
	}
	#reg .login_sub{
		width:60px;
		height:25px;
		font-size:10px;
	}
	#alert{
		position:absolute;
		top:200px;
		left:900px;
		font-size:17px;
		width:150px;
		height:240px;
		padding-left:10px;
		display:none;
		z-index:3;
		background:pink;
		border:1px solid black;
	}
	#alert #close{
		position:relative;
		left:80px;
		top:-30px;
		text-decoration:none;
		color:black;
	}
	#alert #dec{
		font-size:11px;
	}
	#alert{
		line-height:30px;
	}
	#mask{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background:#000;
		opacity:0.3;
		display:none;
		z-index:1;
		overflow:hidden;
	}
</style>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
	/*  var xhr;
	//完成初始化
	function createXHR(){
		try{
			return new XMLHttpRequest();
		}catch(e){
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	//
	function checkName(){
		xhr=createXHR();
		var name=document.getElementById("uname").value;
		xhr.onreadystatechange=callback;
		xhr.open("GET","UserReg?userName="+name,true);
		xhr.send(null);
	}
	//回调函数
	function callback(){
		if(xhr.readyState==4 && xhr.status==200){
			var prompting=document.getElementById("prompting");
			var result=xhr.responseText;
			if(result=="true"){
				prompting.innerHTML="用户名已存在";
			}else{
				prompting.innerHTML="用户名可以使用";
			}
		}
		
	}  */
	 $(function(){
		$("#uname").blur(function(){
			$.get("UserReg",{userName:$("#uname").val()
			},function(data,textStatus){
				if(data=="true"){
					$("#prompting").html("用户名已存在");
					$(":submit").attr("disabled","disabled");
				}else{
					$("#prompting").html("用户名可以使用");
					$(":submit").attr("disabled",false);
				}
				
			})
		})
	}) 
	 function sel(){
		 var options=document.getElementById("county").value;
		 var heNans=["郑州","新乡","洛阳","开封","南阳","周口"];
		 var heBeis=["石家庄","保定","邯郸","秦皇岛","唐山","邢台"];
		 if(options=="henan"){
			 document.getElementById("choose_city").innerHTML="";
			 for(var i=0;i<heNans.length;i++){
				 var chk=document.createElement("input");
				 if(i==0){
					 chk.setAttribute("checked"," checked");
				 }
				 chk.setAttribute("type","checkbox");
				 chk.setAttribute("name","test");
				 chk.setAttribute("value",heNans[i]);
				 var fonts=document.createElement("span");
				 fonts.innerHTML=heNans[i];
				 document.getElementById("choose_city").appendChild(chk);
				document.getElementById("choose_city").appendChild(fonts);
			 }
		 }
		 if(options=="hebei"){
			 document.getElementById("choose_city").innerHTML="";
			for(var i=0;i<heBeis.length;i++){
				var chk=document.createElement("input");
				if(i==0){
					 chk.setAttribute("checked","checked");
				 }
				chk.setAttribute("type","checkbox");
				chk.setAttribute("value",heBeis[i]);
				chk.setAttribute("name","test");
				var fonts=document.createElement("span");
				fonts.innerHTML=heBeis[i];
				document.getElementById("choose_city").appendChild(chk);
				document.getElementById("choose_city").appendChild(fonts);
			}
				document.getElementById("hebei").style.display="block";
			}else{
				document.getElementById("hebei").style.display="none";
			}
	} 
	function showAlert(){
		document.getElementById("mask").style.display="block";
		document.getElementById("alert").style.display="block";
		document.body.style.overflow="hidden";
		var heNans=["郑州","新乡","洛阳","开封","南阳","周口"];
		document.getElementById("choose_city").innerHTML="";
		 for(var i=0;i<heNans.length;i++){
			 var chk=document.createElement("input");
			 if(i==0){
				 chk.setAttribute("checked","checked");
			 }
			 chk.setAttribute("type","checkbox");
			 chk.setAttribute("name","test");
			 chk.setAttribute("value",heNans[i]);
			 var fonts=document.createElement("span");
			 fonts.innerHTML=heNans[i];
			 document.getElementById("choose_city").appendChild(chk);
			document.getElementById("choose_city").appendChild(fonts);
		 }
	}
	function okay(){
		document.getElementById("city").innerHTML="";
		var obj=document.getElementsByName("test");
		var str="";
		for(var i=0;i<obj.length;i++){
			 if(obj[i].checked){
				str+=obj[i].value+"+";
			} 
		} 
		var len=str.length-1;
		str=str.substr(0,len);
		document.getElementById("city").value=str;
		document.getElementById("alert").style.display="none";
		document.getElementById("mask").style.display="none";
	}
	function closeAll(){
		document.getElementById("alert").style.display="none"
		document.getElementById("mask").style.display="none";
	}

</script>
<body>
	<div id="reg">
		<form action="UserRegister" method="post">
    		<p><label> 用户名 </label>
    		<input type="text" id="uname" class="login_input" name="username" onblur="checkName()"/><span id="prompting"></span></p>
    		<p><label> 密&#160;&#160;码 </label>&nbsp;
    		<input type="password" id="upwd" value="" class="login_input" name="password" /><br/></p>
    		<p><label>去过的城市</label><input type="text" name="city" id="city" onfocus="javascript:showAlert()"></p>
   			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" class="login_sub" value="注册" />&nbsp;&nbsp;&nbsp;</p>
   		</form>
   </div>
   <div id="alert">
   		<p id="dec">请选择去过的城市...</p> &nbsp;&nbsp;<input type="button" id="close" onclick="closeAll()" value="关闭"/>
   		<p><select id="county" onchange="javascript:sel()">
   			<option value="henan" selected="selected">河南</option>
   			<option value="hebei">河北</option>
   		</select></p>
   		<div id="choose_city">
   		</div>
   		<input type="button" id="okay" value="确定" onclick="okay()">&nbsp;<input type="button" value="取消" onclick="closeAll()">&nbsp;<input type="button" value="默认" onclick="okay()">
   </div>
   <div id="mask"></div>
</body>
</html>